;(function(id) {
  function drawClock (id) {
    const dom = typeof id === 'string' ? document.getElementById(id) : id;
    
    const canvas = document.createElement('canvas');
    dom.appendChild(canvas);
    const canvasWH = Math.min(dom.clientWidth, dom.clientHeight);

    const cw = canvas.width = canvasWH;
    const ch = canvas.height = canvasWH;
    const r = Math.min(cw, ch) / 2;
    const rem = Math.min(cw, ch) / 200; // 控制整体的缩放

    const ctx = canvas.getContext('2d');
    
    function drawBackground() {
      ctx.save();
      ctx.translate(r, r);
      ctx.beginPath();
      ctx.lineWidth = 10 * rem;
      ctx.arc(0, 0, r - ctx.lineWidth / 2, 2 * Math.PI, false);
      ctx.stroke();
    
      let hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
      // 保证文字的对齐方式
      ctx.font = `${18 * rem}px Arial`;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      hourNumbers.forEach((num, i) => {
        // 计算弧度
        let rad = 2 * Math.PI / 12 * i;
        // 计算 (x, y) 坐标
        let x = Math.cos(rad) * (r - 30 * rem);
        let y = Math.sin(rad) * (r - 30 * rem);
        ctx.fillText(num, x, y);
      });
    
      for (let i = 0; i < 60; i++) {
        let rad = 2 * Math.PI / 60 * i;
        let x = Math.cos(rad) * (r - 18 * rem);
        let y = Math.sin(rad) * (r - 18 * rem);
        ctx.beginPath();
        if (i % 5 === 0) {
          ctx.fillStyle = '#000';
          ctx.arc(x, y, 3 * rem, 0, 2 * Math.PI, false);
        } else {
          ctx.fillStyle = '#ccc';
          ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
        }
        ctx.fill();
      }
    }
  
    function drawHour (hour, minute) {
      ctx.save();
      ctx.beginPath();
      let hourRad = 2 * Math.PI / 12 * hour; // 时针的弧度
      let minuteRad = 2 * Math.PI / 12 / 60 * minute;// 分针的弧度
      ctx.rotate(hourRad + minuteRad);
      ctx.lineWidth = 6 * rem;
      ctx.lineCap = 'round';
      ctx.moveTo(0, 10 * rem);
      ctx.lineTo(0, -r + 80 * rem);
      ctx.stroke();
      ctx.restore();
    }
    
    function drawMinute (minute) {
      ctx.save();
      ctx.beginPath();
      let rad = 2 * Math.PI / 60 * minute;
      ctx.rotate(rad);
      ctx.lineWidth = 3 * rem;
      ctx.lineCap = 'round';
      ctx.moveTo(0, 10 * rem);
      ctx.lineTo(0, -r + 60 * rem);
      ctx.stroke();
      ctx.restore();
    }
    
    function drasDot () {
      ctx.beginPath();
      ctx.fillStyle = '#aaa';
      ctx.arc(0, 0, 4 * rem, 0, 2 * Math.PI, false);
      ctx.fill();
    }
    
    function drawSecond (second) {
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = 'red';
      let rad = 2 * Math.PI / 60 * second;
      ctx.rotate(rad);
      ctx.lineCap = 'round';
      ctx.moveTo(-2, 20 * rem);
      ctx.lineTo(2, 20 * rem);
      ctx.lineTo(1, -r + 40 * rem)
      ctx.lineTo(-1, -r + 40 * rem)
      ctx.fill();
      ctx.restore();
    }
    
    function draw () {
      ctx.clearRect(0, 0, cw, ch);
      const nowTime = new Date();
      const hour = nowTime.getHours();
      const minute = nowTime.getMinutes();
      const second = nowTime.getSeconds();
      drawBackground();
      drawHour(hour, minute);
      drawMinute(minute);
      drawSecond(second);
      drasDot();
      ctx.restore();
    }
    draw();
    setInterval(draw, 1000)
  }
  window.drawClock = drawClock;
})(window);
